<template>
  <div class="sendMessages mod-config">
    <el-row>
      <el-col v-loading="chongzhiLoading" :span="6" v-if="isAuth('hotel:hotelrecharge:balanceChange')">
        <div id="Editsv_Subcardlist" class="Editsv_Subcardlist" style="display: block;">
          <div id="Editsv_Subcardlistpay" style="" data-flagtype="1">
            <div class="paycardmumber content-Secondary-nav" style="margin-top: 0;">
              <div class="search-input" style="width:100%;margin:auto;height:40px;background:#f7f7f7;line-height:40px;border:none;padding-top:1px;">
                <el-input placeholder="会员卡号" prefix-icon="el-icon-search" v-model="search.key">
                </el-input>
                <a href="javascript: void(0);" class="positionicontype" id="searchMemberList2" v-if="!search.key" style="width: 70px; border: none; top: 7px;"
                  @click="selUser()">选择会员</a>
                <a href="javascript: void(0);" class="positionicontype" id="searchmember" v-else style="width: 70px; border: none; top: 7px;"
                  @click="searchSelUser()">搜索会员</a>
              </div>
              <div class="Subcardlistbgg" style="height:147px;">
                <!-- 头像-->
                <el-row type="flex" class="row-bg">
                  <el-col :span="6">
                    <img style="width: 50px;height: 50px;border-radius: 50%;margin-left: 10px;" :src="search.entity.img?search.entity.img:'http://decerp.cc/images/001.png'"
                      @error="true" />
                  </el-col>
                  <el-col :span="6">
                    <el-row style="line-height: 25px;">
                      <el-col :span="24">
                        <span>{{search.entity.name}}</span>
                      </el-col>
                    </el-row>
                    <el-row style="line-height: 25px;">
                      <el-col :span="24">
                        <span>{{search.entity.tel}}</span>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
                <!-- 属性-->
                <el-row :gutter="20" style="text-align: center;margin-top: 16px;" class="Subcardlistbgg-row-userinfo">
                  <el-col :span="6">积分</el-col>
                  <el-col :span="6">余额</el-col>
                  <el-col :span="6">已消费</el-col>
                  <el-col :span="6">来源</el-col>
                </el-row>
                <el-row :gutter="20" style="text-align: center;margin-top: 5px;">
                  <el-col :span="6"><span>{{search.entity.score}}</span></el-col>
                  <el-col :span="6"><span>{{parseFloat(search.entity.balance).toFixed(2)}}</span></el-col>
                  <el-col :span="6"><span>{{parseFloat(search.entity.totalBalance - search.entity.balance).toFixed(2)}}</span></el-col>
                  <el-col :span="6"><span>{{search.entity.source}}</span></el-col>
                </el-row>
              </div>
            </div>
            <el-form class="chongzhiForm" :model="dataForm1" :rules="dataRule" ref="dataForm1" @keyup.enter.native="dataFormSubmit1()"
              label-width="auto">
              <el-form-item label="选择类型" prop="state">
                <el-radio-group v-model="dataForm1.state">
                  <el-radio :label="3">充值</el-radio>
                  <el-radio :label="4">扣费</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label="dataForm1.state == 3 ? '充值金额' : '扣费金额'" prop="czMoney">
                <el-input-number style="width: 100%;" v-model="dataForm1.czMoney" :step="10" :min="0.01"></el-input-number>
              </el-form-item>
              <el-form-item label="赠送金额" v-if="dataForm1.state == 3" prop="zsMoney">
                <el-input-number style="width: 100%;" v-model="dataForm1.zsMoney" :step="10" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="备注信息" prop="note">
                <el-input type="textarea" :rows="2" v-model="dataForm1.note" placeholder="备注信息"></el-input>
              </el-form-item>
              <el-form-item label="推销员工" v-if="dataForm1.state == 3" prop="salesman">
                <el-input v-model="dataForm1.salesman" placeholder="推销员工"></el-input>
              </el-form-item>


              <el-form-item label="支付方式" v-if="dataForm1.state == 3" prop="payType">
                <el-select v-model="dataForm1.payType" placeholder="请选择">
                  <el-option v-for="item in options.paysTypeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <!--  <div style="text-align: center;" v-if="dataForm1.state == 3">-->
              <!--                  <el-radio-group v-model="dataForm1.payType" size="medium">
                    <el-radio-button :label="1">现金</el-radio-button>
                    <el-radio-button :label="2">微信</el-radio-button>
                    <el-radio-button :label="3">支付宝</el-radio-button>
                    <el-radio-button :label="4">银行卡</el-radio-button>
                    <el-radio-button :label="5">其他</el-radio-button>
                  </el-radio-group> -->

              <!-- <el-radio v-model="dataForm1.payType" style="margin-right: 5px;" :label="1" border>现金</el-radio>
                  <el-radio v-model="dataForm1.payType" style="margin-right: 5px;" :label="2" border>微信</el-radio>
                  <el-radio v-model="dataForm1.payType" style="margin-right: 5px;" :label="3" border>支付宝</el-radio>
                  <el-radio v-model="dataForm1.payType" style="margin-right: 5px;margin-top: 15px;" :label="4" border>银行卡</el-radio>
                  <el-radio v-model="dataForm1.payType" style="margin-right: 5px;margin-top: 15px;" :label="5" border>其他</el-radio> -->
              <!--  </div>-->
              <el-button style="width: 100%;margin-top: 15px;" type="primary" @click="dataForm1Submit()">确认结算</el-button>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="isAuth('hotel:hotelrecharge:balanceChange')?18:24">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" style="display: flex;">
          <el-form-item style="width: 220px;">
            <el-input style="" v-model="dataForm.key" placeholder="会员卡号/姓名/手机号/证件号" clearable></el-input>
          </el-form-item>
          <el-form-item class="hotelrchrge-el-form-item">
            <el-date-picker v-model="dataForm.startDate" value-format="timestamp" type="date" placeholder="开始日期"></el-date-picker>
            <el-date-picker v-model="dataForm.endDate" value-format="timestamp" type="date" placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button @click="getDataList()">{{ $t('Common.Query') }}</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="dataList" border="" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
          style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="sellerName" header-align="center" align="center" label="商家" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.sellerName ? scope.row.sellerName : '管理员' }}</span>
            </template>

          </el-table-column>
          <el-table-column prop="outTradeNo" header-align="center" align="center" width="250" label="充值流水"></el-table-column>
          <el-table-column prop="memberName" header-align="center" align="center" label="用户" width="200"></el-table-column>
          <el-table-column prop="memberZSName" header-align="center" align="center" label="姓名" width="120"></el-table-column>
          <el-table-column prop="memberTel" header-align="center" align="center" label="手机号" width="120"></el-table-column>

          <el-table-column prop="czMoney" header-align="center" align="center" label="充值金额">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 4" style="color: red;">-{{scope.row.czMoney}}</span>
              <span v-else style="color: green;">+{{scope.row.czMoney}}</span>
            </template>

          </el-table-column>
          <el-table-column prop="zsMoney" header-align="center" align="center" label="赠送金额">
            <template slot-scope="scope">
              <span v-if="scope.row.zsMoney > 0" style="color: green;">+{{scope.row.zsMoney}}</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column prop="note" header-align="center" align="center" label="备注信息"></el-table-column>
          <el-table-column prop="membercardNo" header-align="center" align="center" width="250" label="会员卡号"></el-table-column>
          <el-table-column prop="memberCertificateNo" header-align="center" align="center" width="250" label="证件号"></el-table-column>
          <el-table-column prop="state" header-align="center" align="center" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state === 0" size="small" type="danger">未支付</el-tag>
              <el-tag v-else size="small">已支付</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="time" header-align="center" align="center" label="充值日期" width="200">
            <template slot-scope="scope">
              <span>{{ moment(scope.row.time) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="typestext" header-align="center" align="center" label="付款方式">
            <!--            <template slot-scope="scope">
              <span v-if="scope.row.payType === 1" size="small" type="danger">现金</span>
              <span v-if="scope.row.payType === 2" size="small" type="danger">微信</span>
              <span v-if="scope.row.payType === 3" size="small" type="danger">支付宝</span>
              <span v-if="scope.row.payType === 4" size="small" type="danger">银行卡</span>
              <span v-if="scope.row.payType === 5" size="small" type="danger">其他</span>
            </template> -->
          </el-table-column>

          <el-table-column prop="salesman" header-align="center" align="center" label="推销员工"></el-table-column>

          <el-table-column prop="type" header-align="center" align="center" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type === 1" size="small" type="danger">线上</el-tag>
              <el-tag v-else size="small">线下</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>-->
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: left;margin-top: 20px;">
          <span>充值金额：</span><span style="margin-right: 18px;">{{parseFloat(pageCountMoney).toFixed(2)}}元</span>
          <span>赠送金额：</span><span style="margin-right: 18px;">{{parseFloat(pageCountkfMoney).toFixed(2)}}元</span>
        </div>

        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      </el-col>
    </el-row>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="请扫描二维码" :visible.sync="payVisible"
      width="30%" append-to-body>
      <div v-loading="payLoding" element-loading-text="正在执行支付">
        <div style="  display: flex;
          justify-content: center;
          align-items: center;margin-bottom:10px">
          <img src="../../../../assets/img/barCode.jpg" />
        </div>

        <div style="text-align:center">支持微信或支付宝条码支付</div>
        <div style="text-align:center">请用条码枪进行扫描</div>
        <span>
          <el-input v-model="auth_no" placeholder="请扫描二维码,支持微信支付宝" @keyup.enter.native="authClose" ref="inputFocus"></el-input>
        </span>
      </div>

    </el-dialog>


    <!-- 选择用户弹框 -->
    <div class="showAlert" v-show="showUser.alert">
      <div class="alertHeader">
        <p style="line-height: 50px;">选择会员</p>
        <i class="el-icon-close" @click="(showUser.alert = !showUser.alert), (zhezhao = !zhezhao)"></i>
      </div>
      <div class="alertCon">
        <el-form :inline="true" :model="showUser.dataForm" @keyup.enter.native="getMemberDataList()">
          <el-form-item>
            <el-input v-model="showUser.dataForm.name" placeholder="姓名" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="showUser.dataForm.mobile" placeholder="手机号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getMemberDataList()">{{ $t('Common.Query') }}</el-button>
          </el-form-item>
        </el-form>
        <el-table ref="multipleTable" :data="showUser.lists" tooltip-effect="dark" style="width: 100%;height: 100%;overflow-y: auto;">
          <el-table-column prop="totalBalance" header-align="center" align="center" label="操作">
            <template slot-scope="scope">
              <el-tag @click="selThatUser(scope.row)">选择</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="sellerName" header-align="center" align="center" label="所属商家">
            <template slot-scope="scope">
              <span>{{ scope.row.sellerName ? scope.row.sellerName : '管理员' || '--' }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="cardNo" header-align="center" align="center" width="200" label="卡号">
            <template slot-scope="scope">
              <span v-if="scope.row.cardNo">{{ scope.row.cardNo }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column prop="name" header-align="center" align="center" label="姓名">
            <template slot-scope="scope">
              <span v-if="scope.row.name">{{ scope.row.name }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column prop="tel" header-align="center" align="center" width="150" label="手机">
            <template slot-scope="scope">
              <span v-if="scope.row.tel">{{ scope.row.tel }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="gender" header-align="center" align="center" label="性别">
            <template slot-scope="scope">
              <span>{{ scope.row.gender == '0' ? '男' : '女' || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="levelName" header-align="center" align="center" label="会员类型">
            <template slot-scope="scope">
              <span v-if="scope.row.levelName">{{ scope.row.levelName }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="balance" header-align="center" align="center" label="可用余额">
            <template slot-scope="scope">
              <span v-if="scope.row.balance">{{ scope.row.balance }}</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalBalance" header-align="center" align="center" label="累计余额">
            <template slot-scope="scope">
              <span v-if="scope.row.totalBalance">{{ scope.row.totalBalance }}</span>
              <span v-else>0</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btnBox" style="position: absolute;bottom: 18px;right: 28px;">
        <el-button icon="el-icon-close" size="small" @click="(showUser.alert = !showUser.alert), (zhezhao = !zhezhao)">关闭</el-button>
      </div>
    </div>

    <!-- 遮罩 -->
    <div class="zezhao" v-show="zhezhao"></div>

  </div>
</template>

<script>
  import moment from 'moment';
  import AddOrUpdate from './hotelrecharge-add-or-update';
  export default {
    data() {
      return {
        chongzhiLoading: false,
        payLoding: false,
        payVisible: false,
        dataForm: {
          key: '',
          startDate: '',
          endDate: '',
          selDateAdd: '其他'
        },
        search: {
          key: '',
          entity: {
            score: 0,
            balance: 0,
            totalBalance: 0,
          },
          selFlag: false
        },
        zhezhao: false,
        showUser: {
          alert: false,
          lists: [],
          selLists: [],
          counts: 0,
          checkSelLists: [],
          sendTel: '',
          dataForm: {
            mobile: '',
            name: '',
          }
        },
        dataForm1: {
          userId: '',
          czMoney: 1,
          zsMoney: 0,
          note: '',
          outTradeNo: '',
          state: 3,
          payType: '',
          time: '',
          cardId: '',
          salesman: ''
        },
        dataRule: {
          userId: [{
            required: true,
            message: '用户id不能为空',
            trigger: 'blur'
          }],
          czMoney: [{
            required: true,
            message: '充值金额不能为空',
            trigger: 'blur'
          }],
          zsMoney: [{
            required: true,
            message: '赠送金额不能为空',
            trigger: 'blur'
          }],
          outTradeNo: [{
            required: true,
            message: '商户号不能为空',
            trigger: 'blur'
          }],
          state: [{
            required: true,
            message: '1未付款,2已付款不能为空',
            trigger: 'blur'
          }],
          payType: [{
            required: true,
            message: '支付方式不能为空',
            trigger: 'blur'
          }],
          time: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }],
          cardId: [{
            required: true,
            message: '不能为空',
            trigger: 'blur'
          }]
        },
        options: { //支付选项
          paysTypeOptions: [],
          peopleOptions: []
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        timer: null,
        pageCountMoney: 0,
        pageCountkfMoney: 0,
        pageCounttkMoney: 0,
        pageCountytMoney: 0,
        pageCountzsMoney: 0,
        auth_no: '',
        payInterfaceConfig: {}, //支付
      };
    },
    components: {
      AddOrUpdate
    },
    activated() {
      this.getDataList();
      this.getPayTypes();
      this.getPayInterface();
    },
    methods: {
      getPayInterface() {
        this.$http({
          url: this.$http.adornUrl(`/hotel/thotelsellerpayinterfaceconfig/myInfo`),
          method: 'get'
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.payInterfaceConfig = data.tHotelSellerPayInterfaceConfig
          } else {
            this.$message.error("加载支付配置失败")
          }
        })
      },
      authClose() {
        this.payLoding = true;
        //扫码支付请求数据
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelsellerpayinterfaceconfig/preAuthBar'),
          method: 'post',
          data: this.$http.adornData({
            'type': 2, //正式
            'auth_no': this.auth_no, //授权码，客户的付款码
            'total_fee': this.dataForm1.czMoney * 100, //金额，单位分
            'order_body': '会员充值', //订单描述
            'attach': '会员充值', //附加数据,原样返回
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            console.log(data)
            this.payVisible = false
            //保存入账信息
            this.auth_no = "";
            this.payLoding = false;
            var terminalTrace = data.data.terminalTrace
            this.authSubForm(terminalTrace);
          } else if (data.code == 3) {
            //循环查询订单，直至成功或失败
            this.timer = setInterval(() => {
              this.queryOrder(data.data);
            }, 1500);
          } else {
            this.payLoding = false;
            this.auth_no = "";
            this.payVisible = false
            this.$message.error(data.msg);
          }
        })
      },
      //获取支付方式
      getPayTypes() {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelfloorroompaytype/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: 1,
            limit: 999,
            isDeposit: 1,
            state: 1
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.options.paysTypeOptions = data.page.list;
            if(this.options.paysTypeOptions.length > 0){
              this.dataForm1.payType = this.options.paysTypeOptions[0].id
            }
            // this.dataForm.payType = this.options.paysTypeOptions[0].id;
          } else {
            this.options.paysTypeOptions = [];
          }
        });
      },
      moment(date) {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelrecharge/list'),
          method: 'get',
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            ...this.dataForm,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.page.records;
            this.totalPage = data.page.total;
            this.pageCountMoney = 0
            this.pageCountkfMoney = 0

            for (var i = 0; i < this.dataList.length; i++) {
              var demo = this.dataList[i];
              for (var j = 0; j < this.options.paysTypeOptions.length; j++) {
                if (demo["payType"] == parseInt(this.options.paysTypeOptions[j].id)) {
                  this.dataList[i].typestext = this.options.paysTypeOptions[j].name;
                  break;
                }
              }
            }

            this.dataList.forEach((item, index) => {
              if (item.state === 2 || item.state === 3) {
                this.pageCountMoney += item.czMoney
                this.pageCountkfMoney += item.zsMoney
              }
              if (item.state === 4) {
                this.pageCountMoney = this.pageCountMoney - item.czMoney
              }
            })
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      },
      // 删除
      deleteHandle(id) {
        var ids = id ? [id] :
          this.dataListSelections.map(item => {
            return item.id;
          });
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/hotel/hotelrecharge/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        });
      },
      //选择会员
      selUser() {
        let that = this;
        that.showUser.alert = true;
        that.zhezhao = true;
        // 获取会员数据
        that.getMemberDataList();
      },
      //获取会员数据
      getMemberDataList() {
        let that = this;
        // 获取会员数据
        this.$http({
          url: this.$http.adornUrl('/hotel/hotelmemberleveldetail/sms_sel_user'),
          method: 'get',
          params: this.$http.adornParams({
            page: 0,
            limit: 999,
            ...this.showUser.dataForm
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            that.showUser.lists = data.page.records
            that.showUser.lists.forEach((item, index) => {
              console.log(!item.tel)
              if (!item.tel) {
                that.showUser.lists.splice(that.showUser.lists.indexOf(index), 1);
              }
              console.log(that.showUser.lists)
            })
          } else {
            this.$message({
              type: 'error',
              message: data.msg
            });
          }
        });
      },
      //选择当前会员
      selThatUser(row) {
        console.log(row)
        this.search.entity = row
        this.search.key = row.cardNo
        this.search.selFlag = true
        this.dataForm1.userId = row.id
        this.zhezhao = false
        this.showUser.alert = false
        this.dataForm.key = row.cardNo
        this.getDataList();
      },
      changeFocus() {
        this.$nextTick(() => {
          this.$refs.inputFocus.focus();
        })
      },
      queryOrder(data) {
        this.$http({
          url: this.$http.adornUrl('/hotel/thotelsellerpayinterfaceconfig/commonQuery'),
          method: 'post',
          data: this.$http.adornData({
            'pay_type': data.payType,
            'terminal_trace': data.terminalTrace,
            'terminal_time': data.terminalTime,
            'out_trade_no': data.outTradeNo,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            clearInterval(this.timer)
            this.payLoding = false;
            this.payVisible = false
            this.auth_no = "";
            //保存入账信息
            var terminalTrace = data.data.terminalTrace
            this.authSubForm(terminalTrace);
          } else if (data.code === 3) {

          } else {
            clearInterval(this.timer)
            this.payLoding = false;
            this.payVisible = false
            this.auth_no = "";
            this.$message.error(data.msg);
          }
        })
      },
      //充值按钮触发
      dataForm1Submit() {
        const that = this
        if (!that.search.selFlag) {
          return that.$message.error('请选择会员');
        }
        if (!that.dataForm1.czMoney) {
          return that.$message.error('金额不能为空');
        }
        if (that.dataForm1.state == 4) {
          that.dataForm1.zsMoney = 0.0
        }

        if (this.payInterfaceConfig.switchConfig == 1) {
          //触发
          if (that.dataForm1.czMoney > 0) {
            this.payVisible = true;
            this.changeFocus();
            return
          }else{
            this.$message.error("扫码支付不可小于等于0")
            return
          }
        }


        that.chongzhiLoading = true
        this.$http({
          url: this.$http.adornUrl(`/hotel/hotelrecharge/balanceChange`),
          method: 'get',
          params: this.$http.adornParams({
            ...that.dataForm1
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.searchSelUser()
            this.getDataList()
            this.$message({
              message: data.msg,
              type: 'success'
            });
          } else {
            this.$message.error(data.msg);
          }
          that.chongzhiLoading = false
        })
      },
      authSubForm(terminalTrace) {
        let _this = this
        _this.chongzhiLoading = true
        setTimeout(function() {
          _this.$http({
            url: _this.$http.adornUrl(`/hotel/hotelrecharge/balanceChange`),
            method: 'get',
            params: _this.$http.adornParams({
              ..._this.dataForm1,
              terminalTrace:terminalTrace
            })
          }).then(({
            data
          }) => {
            if (data && data.code === 0) {
              _this.searchSelUser()
              _this.getDataList()
              _this.$message({
                message: data.msg,
                type: 'success'
              });
            } else {
              _this.$message.error(data.msg);
            }
            _this.chongzhiLoading = false
          })
        }, 200);
      },
      //搜索会员
      searchSelUser() {
        const that = this
        var key = that.search.key
        if (!key) {
          return that.$message.error('请输入搜索内容');
        }
        that.chongzhiLoading = true
        this.$http({
          url: this.$http.adornUrl(`/hotel/hotelrecharge/balanceSearch`),
          method: 'get',
          params: this.$http.adornParams({
            key: key
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            var row = data.data
            this.search.entity = row
            this.search.selFlag = true
            this.dataForm1.userId = row.id
            this.dataForm.key = row.cardNo
            this.getDataList();
          } else {
            this.$message.error(data.msg);
          }
          that.chongzhiLoading = false
        })
      }
    }
  };
</script>

<style>
  .content-Secondary-nav {
    width: 100%;
    min-height: 54px;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    font-family: '微软雅黑';
    position: relative;
  }

  .content-Secondary-nav .search-input {
    width: 230px;
    height: 30px;
    position: relative;
    line-height: 30px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border: 1px solid #cdd9e6;
    margin-top: 12px;
    overflow: hidden;
  }

  .search-input {
    width: 230px;
    height: 30px;
    position: relative;
    line-height: 30px;
    border-radius: 19px;
    -webkit-border-radius: 19px;
    -moz-border-radius: 19px;
    -ms-border-radius: 19px;
    border: 1px solid #cdd9e6;
    margin-top: 12px;
    overflow: hidden;
  }

  .content-Secondary-nav .search-input .positionicon {
    display: block;
    line-height: 30px;
    text-align: center;
    width: 30px;
    position: absolute;
    left: 6px;
    height: 30px;
    font-size: 18px;
    color: #31c17b;
    transition: 0.35s;
  }

  .content-Secondary-nav .search-input input {
    width: 100%;
    height: 30px;
    outline: none;
    padding-right: 50px;
    color: #666;
    font-size: 14px;
    padding-left: 36px;
    line-height: 32px;
  }

  .content-Secondary-nav .search-input .positionicontype {
    position: absolute;
    width: 45px;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #31c17b;
    height: 23px;
    top: 0;
    line-height: 23px;
    margin-top: 3px;
    border-left: 1px solid #e5e5e5;
  }

  .content-Secondary-nav .search-input .positionicontype {
    position: absolute;
    width: 45px;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #31c17b;
    height: 23px;
    top: 0;
    line-height: 23px;
    margin-top: 3px;
    border-left: 1px solid #e5e5e5;
  }

  .Editsv_Subcardlist .paycardmumber .Subcardlistbgg {
    background: #17B3A3;
    color: #fff;
    border-radius: 8px;
    margin-top: 15px;
    padding-top: 22px;
  }

  .chongzhiForm {
    width: 100%;
    padding-top: 16px;
    min-height: 54px;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
    /* font-family: "\5FAE\8F6F\96C5\9ED1"; */
    position: relative;
  }

  .sendMessages ol,
  ul {
    list-style: none;
    /* padding-left: 0px; */
    padding: 0px;
    margin: 0px;
  }

  .sendMessages .selUserUl li {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    line-height: 25px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 12px;
    position: relative;
    cursor: pointer;
  }

  .sendMessages .sendMessagesContent {
    width: 71.941177%;
    float: left;
    margin-right: 1%;
    padding-bottom: 20px;
    max-width: 800px;
  }

  .sendMessages .messagesbox {
    padding-right: 30px;
    padding-bottom: 15px;
    background-color: #fff;
    width: 100%;
  }

  .sendMessages .selectmessages {
    width: 100%;
    margin-top: 10px;
    height: 54px;
    overflow: hidden;
    line-height: 34px;
  }

  .sendMessages .selectmessages .smsbox {
    color: #fff;
  }

  .fl {
    float: left;
  }

  .sendMessages .selectmessages .exclusive {
    background-color: #f66;
  }

  .sendMessages .selectmessages button {
    margin-right: 15px;
  }

  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  .pad {
    padding-left: 2px;
    padding-right: 2px;
  }

  .fr {
    float: right;
  }

  .sendMessages .sendmember {
    height: 54px;
    width: 100%;
  }

  .sendMessages .sendmember .sendmemberlist {
    float: left;
    max-width: 450px;
    height: 30px;
    overflow: hidden;
    cursor: pointer;
  }

  .sendMessages .sendmember .sendmemberlist .addsendmessages {
    cursor: pointer;
  }

  .sendMessages .sendmember .sendmemberlist i {
    width: 30px;
    height: 30px;
    text-align: center;
    font-style: normal;
    line-height: 30px;
    display: block;
    border: 1px dashed #a5a5a5;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    color: #666;
    float: left;
    margin-right: 8px;
  }

  .sendMessages .sendmember .sendmembercounts {
    float: right;
    line-height: 30px;
    padding-right: 5px;
  }

  .sendMessages .sendmember .sendmembercounts .counts {
    color: #31c17b;
    font-size: 20px;
    padding: 0 3px;
  }

  .sendMessages .messagescontens {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    position: relative;
  }

  .sendMessages .messagescontens textarea {
    display: block;
    width: 100%;
    background-color: #f3f3f3;
    -webkit-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
  }

  .sendMessages .messagescontens .messagesinfo {
    width: 100%;
    height: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #bdc5c1;
    line-height: 50px;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
  }

  .sendMessages .messagescontens .messagesinfo .wordcountbox {
    margin-right: 15px;
  }

  .sendMessages .sendbox-btn {
    width: 100%;
    height: 58px;
    padding-top: 15px;
    padding-bottom: 10px;
  }

  .sendMessages .sendbox-btn .agree {
    width: 14px;
    height: 14px;
    line-height: 16px;
    display: inline-block;
    background-color: #f66;
    font-size: 12px;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
  }

  .sendMessages .sendbox-btn .sendmessage-btn {
    background-color: #f66;
    color: #fff;
    float: right;
    padding-left: 20px;
    padding-right: 20px;
  }

  .sendMessages .messagestips {
    width: 100%;
    background-color: #fff;
  }

  .sendMessages .messagestips ul {
    padding-left: 0px;
    width: 100%;
  }

  .sendMessages .messagestips ul li {
    line-height: 30px;
    font-size: 14px;
  }

  .colorff {
    color: #f00;
  }

  .sendMessages .messagestips .testmessage {
    padding-top: 20px;
  }

  .sendMessages .messagestips .testmessage ul {
    width: 420px;
    overflow: hidden;
  }

  .sendMessages .messagestips .testmessage ul li {
    float: left;
    margin-right: 15px;
  }

  .sendMessages .messagestips ul li {
    line-height: 30px;
    font-size: 14px;
  }

  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }

  .paycenterpage {
    width: 100%;
    margin: auto;
    max-width: 1100px;
  }

  .paycenterpage .main {
    width: 100%;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    background-color: #fff;
  }

  .paycenterpage .smsMain {
    overflow: hidden;
  }

  .paycenterpage .smsMain li {
    float: left;
    width: 25%;
    padding: 10px;
  }

  .paycenterpage .smsMain li a {
    color: #666;
    display: block;
    transition: 0.35s;
  }

  .paycenterpage .smsMain li a img {
    width: 35%;
  }

  .paycenterpage .smsMain li a img {
    float: left;
    position: relative;
    transition: 0.35s;
  }

  .paycenterpage .smsMain li a .smsbox_ {
    float: left;
    padding: 0 5px;
  }

  .paycenterpage .smsMain li a .smsbox_ p {
    line-height: 30px;
    position: relative;
  }

  .paycenterpage .smsMain li a .selectpicee {
    position: absolute;
    right: 0;
    top: 8px;
    font-size: 16px;
    color: #999;
  }

  .paycenterpage .paystyle {
    width: 100%;
    padding-top: 20px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    background-color: #fff;
  }

  .paycenterpage .shareinfo {
    overflow: hidden;
    line-height: 38px;
    margin-bottom: 12px;
  }

  .paycenterpage .paystyle .sharleft {
    height: 38px;
  }

  .paycenterpage .shareinfo .sharleft {
    width: 90px;
    float: left;
  }

  .paycenterpage .shareinfo {
    overflow: hidden;
    line-height: 38px;
    margin-bottom: 12px;
  }

  .paycenterpage .paystyle .shopnumber-pay {
    width: 100%;
    line-height: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 80px;
  }

  .paycenterpage .paystyle .shopnumber-pay .paybtnbox {
    padding-top: 15px;
  }

  .paycenterpage .paystyle .shopnumber-pay .paybtnbox .pay-money {
    margin-right: 25px;
    line-height: 34px;
  }

  .paycenterpage .paystyle .shopnumber-pay .paybtnbox .money {
    font-size: 20px;
    color: #ff5400;
  }

  .paycenterpage .paystyle .shopnumber-pay .paybtnbox #pay {
    font-size: 30px;
    font-weight: bold;
    font-family: '宋体';
  }

  .paycenterpage .paystyle .shopnumber-pay .paybtnbox .successbtn {
    padding-left: 20px;
    padding-right: 20px;
    background-color: #f66;
    color: #fff;
  }

  .sendMessages .showAlert {
    width: 50vw;
    height: 60vh;
    position: fixed;
    top: calc((100vh - 60vh) / 2);
    left: calc((100vw - 50vw) / 2);
    background: white;
    z-index: 999999;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
  }

  .sendMessages .showAlert2 #qrcode {
    text-align: center;
    width: 200px;
    margin: 0px auto;
    margin-top: 18px;
  }

  .sendMessages .showAlert2 {
    width: 300px;
    height: 340px;
    position: fixed;
    top: calc((100vh - 340px) / 2);
    left: calc((100vw - 300px) / 2);
    background: white;
    z-index: 9999999;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    text-align: center;
  }

  .sendMessages .zezhao {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: #000;
    opacity: 0.6;
    filter: alpha(opacity=60);
  }

  .sendMessages .showAlert .alertHeader {
    text-align: center;
  }

  .sendMessages .showAlert .alertHeader p {
    display: inline-table;
  }

  .sendMessages .showAlert .alertHeader i {
    float: right;
    display: inline-table;
    font-size: 22px;
    line-height: 40px;
    margin-right: 8px;
    cursor: pointer;
  }

  .alertCon {
    width: 96%;
    margin: 0px auto;
    height: 60%;
  }

  .sendMessages .messagesPreview {
    width: 27.058823%;
    height: 570px;
    float: left;
    padding-top: 20px;
  }

  .sendMessages .messagesPreview .previewtitle {
    height: 34px;
    line-height: 34px;
    text-align: center;
  }


  .sendMessages .messagesPreview .preview .viewcontent {
    position: absolute;
    top: 110px;
    width: 200px;
    min-height: 30px;
    padding: 5px;
    font-size: 12px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
  }

  .sendMessages .testsend-btn {
    background-color: #f66;
    color: #fff;
    float: right;
    padding-left: 20px;
    padding-right: 20px;
  }

  .btnBox .btnBox_display {
    display: inline-table;
  }

  .btnBox .btnBox_checkbox {}

  .btnBox .btnBox_input {
    width: 80px;
  }

  .hotelrchrge-el-form-item /deep/ .el-form-item__content {
    display: flex;
  }

  .Subcardlistbgg-row-userinfo .el-col:nth-child(3) {
    white-space: nowrap;
  }
</style>
